<!--  -->
<template>
  <view class="container">
    <view class="head_itle" v-if="isTop">
      <image src="../../static/returnimg.png" mode=""></image>
      <text>广州信息公司</text>
    </view>
    <enterpriseInfo v-if="!isTop" />
    <view class="wrapper">
      <view class="main_content" v-for="(item, index) in 10" :key="index">
        <view class="main_content_item">
          <view class="content_title">
            一种电致变色音频控制电路和移动终端颜控制电路和移动终
          </view>
          <view class="content_item">
            <span>发明</span>
            <span>有效</span>
          </view>
          <view class="content_info">
            <span>公告日:2020.01.01</span>
            <span>发明人: 张三</span>
          </view>
          <view class="content_go">
            <image src="../../static/company/goPage.png" mode="" />
          </view>
        </view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import enterpriseInfo from "../../components/enterpriseInfo.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    enterpriseInfo,
  },
  data() {
    //这里存放数据
    return {
      isTop: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.head_itle {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  right: 0;
  padding: 0 30rpx;
  height: 88rpx;
  background-color: #2862ad;
  display: flex;
  align-items: center;
  image {
    width: 20rpx;
    height: 30rpx;
    margin-right: 20rpx;
  }
  text {
    margin-left: 20rpx;
    color: #fff;
  }
}
.wrapper {
  padding: 0 30rpx;

  .itemNum {
    display: flex;
    flex-wrap: wrap;
    span {
      background-color: #fff6ef;
      padding: 8rpx 28rpx;
      margin-right: 15rpx;
      margin-top: 15rpx;
      border-radius: 20rpx;
      color: #ff7648;
      font-size: 24rpx;
    }
  }
  .main_content {
    margin: 20rpx 0;
    .main_content_item {
      border-radius: 20rpx;
      position: relative;
      padding: 30rpx 40rpx;
      background-color: #fff;
      .content_title {
        font-size: 32rpx;
        font-weight: 700;
        color: #333333;
      }
      .content_item {
        margin: 20rpx 0;
        span {
          padding: 6rpx 26rpx;
          background-color: #e8f3ff;
          color: #44a2ff;
          font-size: 24rpx;
          margin-right: 20rpx;
          border-radius: 10rpx;
        }
      }
      .content_info {
        span {
          color: #333333;
          font-size: 24rpx;
          margin-right: 30rpx;
        }
      }
      .content_go {
        position: absolute;
        right: 50rpx;
        top: 50%;
        bottom: 50%;
        transform: translateY(-50%);
        image {
          width: 16rpx;
          height: 24rpx;
        }
      }
    }
  }
}
</style>
